<template>
	<view class="box">
		<SearchBox />
		<Title>热门分类</Title>
		<view class="hot_category">
			<scroll-view scroll-x="true">
				<view class="common_box">
					<view class="item_box" v-for="item in data" :key="item.id" 
						style="flex-shrink: 0;" @click="handleToList(item)">
						<image :src="item.cover" mode=""></image>
						<view class="">{{item.title}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="separation-line"></view>
		<Title>全部分类</Title>
		<view class="common_box" style="flex-wrap: wrap;margin: 0 -20rpx;">
			<view class="item_box" v-for="item in data" :key="item.id" @click="handleToList(item)">
				<image :src="item.cover" mode=""></image>
				<view class="">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchBox from '@/components/common/search-box.vue'
	import Title from '@/components/common/title.vue'
	export default {
		components: {
			SearchBox,
			Title
		},
		data() {
			return {
				data: []
			};
		},
		methods: {
			handleToList(value){
				uni.navigateTo({
					url: '/pages/list/list?id='+value.id + '&title='+value.title+'&type=category'
				});
			}
		},
		onShow() {
			this.$H.get('/category').then(res => {
				// console.log(res)
				this.data = res
			})
		}
	}
</script>

<style lang="scss" scoped>
	.hot_category {
		margin: 0 -20rpx;
	}
	.common_box {
		margin-top: 10rpx;
		display: flex;
	
		.item_box {
			display: flex;
			width: 25%;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			height: 160rpx;
	
			image {
				height: 70rpx;
				width: 70rpx;
			}
		}
	}

	
</style>
